<template>
  <div class="app-container">

    <el-card>
      <el-row>
        <el-form ref="queryForm" inline size="small" :model="queryForm">
          <el-form-item label="所属院系" prop="deptId">
            <el-select v-model="queryForm.deptId" placeholder="请选择所属院系" filterable>
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属班级" prop="classId">
            <my-cascader v-model="queryForm.classId" :options="classTreeList" :level="3"></my-cascader>
          </el-form-item>
          <el-form-item label="所属学年" prop="year">
            <year-select v-model.number="queryForm.year"></year-select>
          </el-form-item>
          <el-form-item label="所属学期" prop="semester">
            <semester-select v-model.number="queryForm.semester"></semester-select>
          </el-form-item>
          <el-form-item label="课程名" prop="name">
            <el-input placeholder="请输入课程名" v-model="queryForm.name"></el-input>
          </el-form-item>
          <el-button icon="el-icon-search" size="small" type="primary" @click="onClickSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQueryForm">重置</el-button>
        </el-form>
      </el-row>
      <el-row>
        <el-button icon="el-icon-plus" size="small" type="primary" plain @click="onClickAdd">新增</el-button>
        <el-button icon="el-icon-edit" size="small" type="success" plain @click="onClickEdit()"
                   :disabled="editDisabled">修改
        </el-button>
        <el-button icon="el-icon-edit" size="small" type="danger" plain v-permission="['admin']">删除</el-button>
      </el-row>
    </el-card>
    <el-table
      v-loading="loading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="ID" width="60" prop="id"></el-table-column>
      <el-table-column label="课程名" prop="name" width="300"></el-table-column>
      <el-table-column label="总学时" prop="hours"></el-table-column>
      <el-table-column label="课程类别" prop="type">
        <template slot-scope="scope">
          <status-show data-name="course_type" :value="scope.row.type"></status-show>
        </template>
      </el-table-column>
      <el-table-column label="课程人数" prop="sumNumber"></el-table-column>
      <!--      <el-table-column label="开设班数" prop="sumClass"></el-table-column>-->
      <el-table-column label="所属院系" prop="dept.name" width="200"></el-table-column>
      <el-table-column label="所属班级" prop="eduClass.name" width="200"></el-table-column>
      <el-table-column label="授课教师" prop="teacher.name"></el-table-column>
      <el-table-column label="学分" prop="credit"></el-table-column>
      <el-table-column label="学年学期" width="200">
        <template slot-scope="scope">
          <year-semester-show :year="scope.row.year" :semester="scope.row.semester"></year-semester-show>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="100">
        <template slot-scope="scope">
          <status-show data-name="course_status" :value="scope.row.status"></status-show>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)" v-permission="['admin']">编辑</el-button>
          <el-button type="text" size="small" @click="handleShowStudents(scope.row.id)">学生名单/录入成绩</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)" v-permission="['admin']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-drawer
      :title="drawer.title"
      :visible.sync="drawer.show"
      :before-close="onDrawerClose"
      size="50%">
      <el-form :rules="formRules" ref="editForm" label-width="auto" :model="form" size="medium">
        <el-form-item label="课程名" prop="name">
          <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
        </el-form-item>
        <el-form-item label="总学时" prop="hours">
          <el-input v-model.number="form.hours" placeholder="请输入学分"></el-input>
        </el-form-item>
        <el-form-item label="课程类别" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="item.value" v-for="(item, index) in enums.course_type">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程人数" prop="sumNumber" v-show="form.type === 2">
          <el-input v-model.number="form.sumNumber" placeholder="请输入课程人数"></el-input>
        </el-form-item>
        <el-form-item label="所属院系" prop="deptId">
          <el-select v-model="form.deptId" placeholder="请选择所属院系" filterable>
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属班级" prop="classId" v-show="form.type === 1">
          <my-cascader v-model="form.classId" :options="classTreeList" :level="3"></my-cascader>
        </el-form-item>
        <el-form-item label="授课教师" prop="teacherId">
          <my-cascader v-model="form.teacherId" :options="teacherTreeList" :level="2"></my-cascader>
        </el-form-item>
        <el-form-item label="学分" prop="credit">
          <el-input-number v-model="form.credit" :precision="2" :min="0" :controls="false"></el-input-number>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属学年" prop="year">
              <year-select v-model.number="form.year"></year-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属学期" prop="semester">
              <semester-select v-model.number="form.semester"></semester-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课程状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="item.value" v-for="(item, index) in enums.course_status">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="form-drawer-footer">
        <el-button @click="onDrawerClose">取 消</el-button>
        <el-button type="primary" @click="onDrawerConfirm" :loading="drawer.confirmLoading">
          {{ drawer.confirmLoading ? '提交中 ...' : '确 定' }}
        </el-button>
      </div>
    </el-drawer>

    <el-drawer
      title="学生名单/录入成绩"
      :visible.sync="studentsDrawer.show"
      direction="rtl"
      size="80%">
      <el-button @click="onClickEnterGrade" type="primary" size="mini">录入成绩</el-button>
      <el-table :data="studentsDrawer.list" :loading="studentsDrawer.loading">
        <el-table-column property="student.name" label="姓名" width="200"></el-table-column>
        <el-table-column property="student.studentNumber" label="学号" width="200"></el-table-column>
        <el-table-column property="student.eduClass.name" label="班级" width="200"></el-table-column>
        <el-table-column property="score" label="成绩">
          <template v-slot="scope">
            <template v-if="scope.row.enterGrade">
              <el-form :model="scope.row">
                <el-input-number v-model="scope.row.newScore" :precision="2" :step="1" :min="0" :max="100" size="mini"
                                 :controls="false" @keyup.enter.native="submitGrade(scope.row)"></el-input-number>
              </el-form>
            </template>
            <template v-else>
              {{ scope.row.score }}
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {addCourse, deleteOneCourse, getCourseList, getOneCourse, updateCourse} from "@/api/course";
import List from "@/mixins/list";
import {getDeptSimpleList, getClassTreeList, getTeacherTreeList} from "@/api/dept";
import CourseValidator from "@/validator/CourseValidator";
import MyCascader from "@/components/MyCascader";
import {mapGetters, mapState} from "vuex";
import YearSelect from "@/components/YearSelect";
import SemesterSelect from "@/components/SemesterSelect";
import {enterGrade, getAllSelection} from "@/api/selection";
import StatusShow from "@/components/StatusShow";
import YearSemesterShow from "@/components/YearSemesterShow/YearSemesterShow";

export default {
  components: {YearSemesterShow, StatusShow, SemesterSelect, YearSelect, MyCascader},
  data() {
    return {
      queryListFun: getCourseList,
      addFun: addCourse,
      updateFun: updateCourse,
      queryOneFun: getOneCourse,
      deleteOneFun: deleteOneCourse,
      validator: CourseValidator,
      queryForm: {
        deptId: null,
        classId: null,
        name: '',
        year: null,
        semester: null
      },
      form: {
        name: '',
        hours: null,
        type: null,
        sumNumber: null,
        sumClass: null,
        deptId: null,
        teacherId: null,
        classId: null,
        credit: null,
        year: null,
        semester: null,
        status: null
      },
      name: '课程',
      deptList: [],
      classTreeList: [],
      teacherTreeList: [],
      studentsDrawer: {
        show: false,
        loading: false,
        list: [],
        enterGrade: false,
      }
    }
  },
  mixins: [
    List
  ],
  mounted() {
    getDeptSimpleList({}).then(res => {
      const data = []
      for (let i of res.data) {
        data.push({
          id: i.id,
          label: i.name
        })
      }
      this.deptList = data
    })
    getClassTreeList().then(res => {
      const classTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.majors) {
          const classChildren = []
          for (let k of j.classes) {
            classChildren.push({
              id: k.id,
              value: k.id,
              label: k.name,
            })
          }
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
            children: classChildren
          })
        }
        classTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.classTreeList = classTreeList
    })
    getTeacherTreeList().then(res => {
      const teacherTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.teachers) {
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
          })
        }
        teacherTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.teacherTreeList = teacherTreeList
    })
  },
  computed: {
    ...mapGetters(['enums'])
  },
  watch: {
    'form.type'(val) {
      const insertRules = CourseValidator.insertRules
      const updateRules = CourseValidator.updateRules
      const boolean = val == 1
      insertRules.sumNumber[0].required = !boolean
      updateRules.sumNumber[0].required = !boolean
      insertRules.classId[0].required = boolean
      updateRules.classId[0].required = boolean
    }
  },
  methods: {
    handleShowStudents(courseId) {
      this.studentsDrawer.show = true
      this.studentsDrawer.loading = true
      getAllSelection(courseId).then(res => {
        const data = res.data
        for (let i of data) {
          i.newScore = i.score
          i.enterGrade = false
          i.isLoading = false
        }
        this.studentsDrawer.list = data
      }).finally(() => {
        this.studentsDrawer.loading = false
      })
    },
    submitGrade(data) {
      enterGrade(data.id, data.newScore).then(res => {
        data.score = data.newScore
        this.$message({
          type: 'success',
          message: res.msg
        })
        data.enterGrade = false
      })
    },
    onClickEnterGrade() {
      for (let i of this.studentsDrawer.list) {
        // this.$set(i, 'enterGrade', true)
        // console.log(i)
        i.enterGrade = true
      }
    }
  }
}
</script>

<style scoped>

</style>
